@charset "utf-8";
/*!
 * Created by Toma on 2016-7-4 10:31:07
 * 干货挑战~ @ver 1.0.1
 */

@import "toma";
@include reset;
@include tools;

body{
  background: #65d1d0;
}
.app{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

%map{
  position: absolute;
  display: block;
  //background: rgba(0,0,0,.6);
}

/* 干货挑战-首屏 */
.page-open{
  @extend .app;
  background: url(../img/open.jpg) no-repeat top center/100% auto;
}
#rule{
  @extend %map;
  right: 0.5rem;
  top: 0.9rem;
  width: 5.3rem;
  height: 2rem;
}
#start{
  @extend %map;
  right: 5.8rem;
  top: 24.3rem;
  width: 7rem;
  height: 2.3rem;
}

/* 活动规则 */
.page-rule{
  display: none;
  @extend .app;
  background: url(../img/rule.jpg) no-repeat top center/100% auto;
}

/* swiper */
.page-content{
  display: none;
  @extend .app;
  background: url(../img/bg.jpg) no-repeat top center/100% auto;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
}

/* 第一页 */
.p-0-1{
  @extend %map;
  width: 9.4rem;
  height: 4.15rem;
  top: 0.6rem;
  right: 1.1rem;
  background: url(../img/p-0-1.png) no-repeat center/contain;
}
.p-0-2{
  @extend %map;
  width: 100%;
  height: 22.6rem;
  top: 5.2rem;
  left: 0;
  background: url(../img/p-0-2.jpg) no-repeat center/contain;
}
.p-0-3{
  @extend %map;
  width: 10.65rem;
  height: 1.8rem;
  top: 25.1rem;
  left: 0.5rem;
  background: url(../img/p-0-3.png) no-repeat center/contain;
}
.p-0-4{
  @extend %map;
  width: 5.2rem;
  height: 3.2rem;
  top: 5.8rem;
  left: 4.1rem;
  background: url(../img/p-0-4.png) no-repeat center/contain;
}
.p-0-5{
  @extend %map;
  width: 2.7rem;
  height: 1.2rem;
  top: 9.5rem;
  left: 0.5rem;
  background: url(../img/p-0-5.png) no-repeat center/contain;
}
.p-0-6{
  @extend %map;
  width: 7.4rem;
  height: 2.2rem;
  top: 17.3rem;
  left: 1.25rem;
  background: url(../img/p-0-6.png) no-repeat center/contain;
}
.p-0-7{
  @extend %map;
  width: 7.1rem;
  height: 2.2rem;
  top: 20.6rem;
  right: 2rem;
  background: url(../img/p-0-7.png) no-repeat center/contain;
}

/* 第二页 */
%p-a-1{
  @extend %map;
  width: 2.9rem;
  height: 3.2rem;
  top: 17.9rem;
  left: 1.03rem;
}
%p-a-2{
  @extend %map;
  width: 14rem;
  height: 5.1rem;
  top: 17.9rem;
  left: 4.1rem;
}
.p-1-1{
  @extend %p-a-1;
  background: url(../img/p-1-1.png) no-repeat center/contain;
}
.p-1-2{
  @extend %p-a-2;
  background: url(../img/p-1-2.png) no-repeat center/contain;
}

/* 第三页 */
.p-2-1{
  @extend %p-a-1;
  background: url(../img/p-2-1.png) no-repeat center/contain;
}
.p-2-2{
  @extend %p-a-2;
  background: url(../img/p-2-2.png) no-repeat center/contain;
}

/* 第三页 */
.p-3-1{
  @extend %p-a-1;
  top: 16.5rem;
  background: url(../img/p-2-1.png) no-repeat center/contain;
}
.p-3-2{
  @extend %p-a-2;
  top: 16.6rem;
  height: 3.2rem;
  background: url(../img/p-3-2.png) no-repeat center/contain;
}

/* 第四页 */
.p-4-1{
  @extend %p-a-1;
  top: 16.5rem;
  background: url(../img/p-4-1.png) no-repeat center/contain;
}
.p-4-2{
  @extend %p-a-2;
  top: 16.6rem;
  height: 3.2rem;
  background: url(../img/p-4-2.png) no-repeat center/contain;
}


/* 星星 */
%start{
  display: inline-block;
  width: 2.75rem;
  height: 2.5rem;
  margin-left: 0.25rem;
}
.start-1{
  @extend %start;
  background: url(../img/start-1.png) no-repeat center/contain;
  &.action{
    background: url(../img/start-1-a.png) no-repeat center/contain;
  }
}
.start-2{
  @extend %start;
  background: url(../img/start-2.png) no-repeat center/contain;
  &.action{
    background: url(../img/start-2-a.png) no-repeat center/contain;
  }
}
.start-3{
  @extend %start;
  background: url(../img/start-3.png) no-repeat center/contain;
  &.action{
    background: url(../img/start-3-a.png) no-repeat center/contain;
  }
}
.start-4{
  @extend %start;
  background: url(../img/start-4.png) no-repeat center/contain;
  &.action{
    background: url(../img/start-4-a.png) no-repeat center/contain;
  }
}
.start-box{
  @extend %map;
  right: 0.5rem;
  top: 1.5rem;
  font-size: 0;
}

/* gif */
%gif{
  @extend %map;
  width: 16.3rem;
  height: 9.2rem;
  top: 6rem;
  left: 1.25rem;
  box-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0.16);
}
.gif-1{
  @extend %gif;
  background: url(../img/r1.gif) no-repeat center/contain;
}
.gif-2{
  @extend %gif;
  background: url(../img/r2.gif) no-repeat center/contain;
}
.gif-3{
  @extend %gif;
  background: url(../img/r3.gif) no-repeat center/contain;
}
.gif-4{
  @extend %gif;
  background: url(../img/r4.gif) no-repeat center/contain;
}


/* 上传图片 */
.up-box{
  @extend %map;
  top: 20.5rem;
  left: 2.4rem;
  .zs{
    display: inline-block;
    width: 8.5rem;
    height: 4.75rem;
    box-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0.16);
  }
  .uploadimg{
    display: inline-block;
    width: 3.2rem;
    height: 4.9rem;
    margin-left: 0.8rem;
    background: url(../img/camera.png) no-repeat center/contain;
  }
}

/* 提交信息页 */
.uppage{
  background: url(../img/uppage.jpg) no-repeat top center/100% auto;
}
#lUpimg1,
#lUpimg2{
  @extend %map;
  width: 6.2rem;
  height: 3.5rem;
  right: 1.55rem;
  //background: rgba(0,0,0,.4);
  background-size: contain;
}
#lUpimg1{
  top: 7.4rem;
}
#lUpimg2{
  top: 13.3rem;
}
#lUtext{
  @extend %map;
  top: 19.65rem;
  left: 2.7rem;
  height: 2.55rem;
  width: 13.75rem;
  font-size: 0.7rem;
  border: none;
  outline: none;
  background: transparent;
}
#updata{
  @extend %map;
  width: 7.6rem;
  height: 2.5rem;
  top: 24rem;
  left: 5.65rem;
  background: transparent;
  border: none;
  outline: none;
}

/* 报告页 */
.page-report{
  @extend .app;
  background: url(../img/other/tzbg.jpg) no-repeat top center/100% auto;
  .sharebtn{
    @extend %map;
    width: 7.6rem;
    height: 2rem;
    top: 24.2rem;
    left: 5.6rem;
    //background-color: rgba(0, 0, 0, .4);
  }
  .user-name{
    @extend %map;
    top: 4.6rem;
    left: 1.4rem;
    font-size: 0.9rem;
    color: #10a7a5;
  }
  .img-v{
    @extend %map;
    width: 7.3rem;
    height: 4.1rem;
    top: 9.7rem;
    background-size: contain;
    background-position: center;
    box-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0.16);
  }
  .img1{
    left: 1.7rem;
  }
  .img2{
    left: 9.7rem;
  }
  .comment{
    @extend %map;
    width: 10rem;
    height: 3.75rem;
    top: 16.2rem;
    left: 1.45rem;
    font-size: 0.7rem;
    line-height: 1.4;
    overflow-y: scroll;
    color: #10a7a5;
    text-indent: 1.4rem;
    -webkit-overflow-scrolling: touch;
  }
}
/* 分享提示 */
.share{
  display: none;
  @extend .app;
  background: rgba(0,0,0,.7);
  z-index: 100;
  img{
    width: 100%;
  }
}

/* 转盘 */
.page-turntable{
  display: none;
  @extend .app;
  background: url(../img/other/turntable.jpg) no-repeat top center/100% auto;
  .pointer{
    @extend %map;
    width: 6.1rem;
    height: 7.7rem;
    top: 10.4rem;
    left: 6.2rem;
    background: url(../img/other/arr.png) no-repeat top center/contain;

    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 3.05rem 4.65rem;
    transform: rotate(0deg);
    transform-origin: 3.05rem 4.65rem;
  }
  .action{
    @extend %map;
    width: 4.6rem;
    height: 4.6rem;
    top: 12.75rem;
    left: 7rem;
    background: url(../img/other/action.png) no-repeat top center/contain;
  }
}
.winning{
  display: none;
  @extend .app;
  background-color: rgba(0,32,36,.7);
  .win-con{
    @extend %map;
    width: 15.9rem;
    height: 20.4rem;
    top: 4.4rem;
    left: 50%;
    margin-left: -7.95rem;
    background: url(../img/other/winning.png) no-repeat top center/contain;
  }
}
.slink{
  @extend %map;
  width: 7.6rem;
  height: 2.1rem;
  top: 16.7rem;
  left: 4.2rem;
  //background: rgba(0,0,0,.5);
}
#money{
  @extend %map;
  font-size: 2rem;
  color: #faf15f;
  font-weight: bold;
  top: 6.45rem;
  width: 100%;
  text-align: center;
  font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}

/* 朋友圈 分享页面 */

.share-bg{
  background: url(../img/share/rbg.jpg) #65d1d0 no-repeat top center/cover;
}
.page-share{
  .tit{
    margin: 2.25rem auto 1rem;
    width: 10.9rem;
    height: 1.6rem;
    background: url(../img/share/tit.png) no-repeat top center/contain;
  }
  .user-name{
    color: #10a7a5;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
  }
  .tic{
    width: 16rem;
    height: 2.1rem;
    margin-bottom: 0.3rem;
    background: url(../img/share/tic.png) no-repeat top center/contain;
  }
  .comment{
    font-size: 0.7rem;
    color: #10a7a5;
    width: 16rem;
    text-indent: 1.4rem;
  }
  .user-info{
    margin-bottom: 0.75rem;
    margin-left: 1.4rem;
  }
  .img-box{
    font-size: 0;
    margin-left: 1.4rem;
    margin-bottom: 0.75rem;
    .img1,
    .img2{
      display: inline-block;
      width: 7.25rem;
      height: 4.15rem;
    }
    .img1{
      margin-left: 0.35rem;
      margin-right: 0.5rem;
    }
  }
  .js{
    width: 16rem;
    height: 3.8rem;
    margin-top: 0.5rem;
    background: url(../img/share/js.png) no-repeat top center/contain;
  }
  .tz-box{
    font-size: 0;
    margin-left: 1.4rem;
    margin-bottom: 1.25rem;
  }
  .spbtn,
  .gmbtn{
    display: inline-block;
    width: 6.9rem;
    height: 2.1rem;
  }
  .spbtn{
    margin-left: .22rem;
    margin-right: 1.3rem;
    background: url(../img/share/spbtn.png) no-repeat top center/contain;
  }
  .gmbtn{
    background: url(../img/share/gmbtn.png) no-repeat top center/contain;
  }
}


/* loading */
.loading{
  @extend .app;
  background-color:#fff;
  text-align:center;
  z-index:90;
}
.loading-content{
  position:absolute;
  width:100%;
  top:50%;
  left:0;
  margin-top:-100px;
}
.loading-content img{
  width: 7rem;
  @include animation(rota 1.4s ease-in-out infinite);
  transform-origin: center 5px;
}
.load-p{
  color:rgb(114,114,114);
  font-weight:bold;
  margin-top:5px;
  font-size: .75rem;
  font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}

/* 小箭头 */
.arrow{
  @extend %map;
  width: 1.7rem;
  height: 1.6rem;
  bottom: 0.75rem;
  left: 50%;
  margin-left: -1.1rem;
  background: url(../img/arrow.png) no-repeat center/contain;
  @include animation(arrw .8s linear infinite);
}
/* 晃动 */
.anaway{
  @include animation(anaway 2s ease-in-out infinite);
}


/* 动画 */
@-webkit-keyframes arrw {
  0%{ -webkit-transform: translate(0,0); opacity: .4;}
  50%,60%{ -webkit-transform: translate(0,-8px);opacity: 1;}
  100%{ -webkit-transform: translate(0,0); opacity: .4;}
}
@keyframes arrw {
  0%{ transform: translate(0,0); opacity: .4;}
  50%,60%{ transform: translate(0,-8px);opacity: 1;}
  100%{ transform: translate(0,0); opacity: .4;}
}

@-webkit-keyframes anaway {
  0%{ -webkit-transform: rotate(8deg);}
  50%{ -webkit-transform: rotate(-8deg);}
  100%{ -webkit-transform: rotate(8deg);}
}
@keyframes anaway {
  0%{ transform: rotate(8deg);}
  50%{ transform: rotate(-8deg);}
  100%{ transform: rotate(8deg);}
}

@-webkit-keyframes rota {
  0%{ -webkit-transform: rotate(5deg);}
  50%{ -webkit-transform: rotate(-5deg);}
  100%{ -webkit-transform: rotate(5deg);}
}
@keyframes rota {
  0%{ transform: rotate(5deg);}
  50%{ transform: rotate(-5deg);}
  100%{ transform: rotate(5deg);}
}


::-webkit-scrollbar{width:0;height:0;}
::-webkit-scrollbar-button:vertical{display:none;}
::-webkit-scrollbar-track:vertical{background-color:rgba(0,0,0,0);}
::-webkit-scrollbar-track-piece{background-color:rgba(0,0,0,0);}
::-webkit-scrollbar-thumb:vertical{margin-right:0; background-color: rgba(0,0,0,0); border-radius: 5px;}
::-webkit-scrollbar-thumb:vertical:hover{background-color:rgba(0,0,0,0);}
::-webkit-scrollbar-corner:vertical{background-color:rgba(0,0,0,0);}
::-webkit-scrollbar-resizer:vertical{background-color:rgba(0,0,0,0);}